import React, { Component } from 'react';
import Node from './Node';
import blockRenderMap from './blockRenderMap';
import {
  FormItemDecorator,
  FormDecorator,
  PositionDecorator,
  CompositeDecotrator,
  Decorator,
  DynamicDecorator,
  LabelDecorator,
} from './decorators';
import { Injector, GetDataInjector } from './injector';

const decorator = new CompositeDecotrator([
  FormItemDecorator,
  DynamicDecorator,
  LabelDecorator,
  PositionDecorator,
]);
const documentDecorator = new Decorator(FormDecorator);
const injector = new Injector(GetDataInjector);
class FormRender extends Component {
  static defaultProps = {
    documentDecorator,
    blockRenderMap,
    decorator,
    injector,
  };

  renderNode = node => {
    const { injector, blockRenderMap, decorator } = this.props;
    return (
      <Node
        key={node.key}
        node={node}
        renderMap={blockRenderMap}
        decorator={decorator}
        injector={injector}
      />
    );
  };

  render() {
    const { document = { nodes: [] } } = this.props.value;
    const { documentDecorator } = this.props;
    const children = document.nodes.map(this.renderNode);
    let content = <div style={{ position: 'relative' }}>{children}</div>;
    if (documentDecorator) {
      content = documentDecorator.render(this.props, content);
    }
    return content;
  }
}

export default FormRender;
